<template>
    <div id="studentTestImport">
        <div class="breadcrumb">
            <img src="../../../../static/img/appoinment_1.png" class="head_img">
            <span class="title" @click="cancel()">体测预约</span>/ 导入预约学生
        </div>
        <div class="test-detail">
            <span class="physical-name">{{physicalName}} -- {{testName}}</span>
            <span>测试时间：{{startTime}} - {{endTime}}</span>
            <span>测试教师：{{teacherName}}</span>
            <span>已预约学生：{{totalOrdered}}人（男：{{maleCount}}人，女：{{femaleCount}}人）</span>
        </div>
        <div class="list">
            <div class="list_head">
                <span class="head_name">导入预约学生</span>
                <el-button class="cancel" type="primary" @click="cancel()">返回</el-button>
            </div>

            <div id="sec_1">
                1、下载预约学生导入模板，批量导入预约学生
                <a href="http://swapp-test-images.oss-cn-hangzhou.aliyuncs.com/physical/importPhysicaldStudentData.xls" class="mylink">下载模板</a>
            </div>
            <div id="sec_2">
                <div id="step2">
                    <div style="text-align: center;">
                        2、选择已填写学生信息的文件，导入预约学生
                    </div>
                    <div class="sec-params">
                        <span>导入场次：{{testName}}</span>
                        <br>
                        <span>性别要求：{{gender == 0 ? '女' : gender == 1 ? '男' : '不限'}}</span>
                    </div>
                   
                    <el-upload :action="actionUrl" :on-success="handleSuccess" :data="imData" :on-error="handleError" name="uploadFile" :headers="headers"
                        :show-file-list='false' class="mybtn">
                        <el-button type="primary">选择文件</el-button>
                    </el-upload>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            let checkGrade = (rule, value, callback) => {
                if (value) {
                    callback();
                } else {
                    callback(new Error("请选择年级"));
                }
            };
            return {
                itemId: this.$util.getUrlParam("itemId") || "",
                physicalName: this.$util.getUrlParam('physicalName') || "",
                testName: this.$util.getUrlParam('testName') || "",
                gender: this.$util.getUrlParam('gender') || '',
                teacherName: '',
                maleCount: 0,
                femaleCount: 0,
                totalOrdered: 0,
                startTime: '',
                endTime: '',
                physicalTestId: this.$util.getUrlParam("physicalTestId") || "",
                actionUrl: "",
                headers: {},
                imData: {
                    gender: '',
                    fieldId: this.$util.getUrlParam('itemId') * 1 || '',
                    testNameType: '',
                    grade: 0  // 0 表示忽略年级
                },
                pubTestItem: [
                    { id: 1, name: '身高体重' },
                    { id: 2, name: '肺活量' },
                    { id: 3, name: '50米跑' },
                    { id: 4, name: '立定跳远' },
                    { id: 5, name: '坐位体前屈' },
                    { id: 6, name: '仰卧起坐' },
                    { id: 7, name: '引体向上' },
                    { id: 8, name: '1000米跑' },
                    { id: 9, name: '800米跑' }
                ]
            };
        },
        mounted() {
            
            this.pubTestItem.forEach(item => {
                if (this.testName == item.name) {
                    this.imData.testNameType = item.id * 1
                }
            })
            this.imData.gender = this.gender * 1;
            this.actionUrl = this.$util.domain + "/managerapi/v3/importstudentfile/" + this.physicalTestId;
            this.headers = {
                rootUnid: this.user.rootUnid
            };
            this.getFiledDetail();
        },
        computed: mapState({ user: state => state.user }),
        methods: {
            //返回
            cancel() {
                let params = {
                    physicalTestId: this.physicalTestId,
                    physicalName: this.physicalName,
                    itemId: this.itemId,
                    testName: this.testName,
                    gender: this.$util.getUrlParam('gender') || ''
                }
                this.$util.refreshTo("/#/reservationData", params);
            },
            // 获取场次统计信息
            getFiledDetail() {
                let url = this.$util.domain + "/api/v24/physical/getFieldStatisticsInfo";

                this.$http({
                    url,
                    method: "GET",
                    params: {
                        fieldId: this.itemId * 1
                    }
                }).then(response => {
                    if (response.data.error == 10000) {
                        let resObj = response.data.data;
                        if (resObj) {
                            this.teacherName = resObj.teacherName;
                            this.femaleCount = resObj.femaleCount;
                            this.maleCount = resObj.maleCount;
                            this.totalOrdered = resObj.femaleCount * 1 + resObj.maleCount * 1;
                            this.startTime = new Date(resObj.startTime).format("yyyy/MM/dd hh:mm");
                            this.endTime = new Date(resObj.endTime).format("hh:mm");
                        }

                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                });
            },
            // 年级
            getTestGrade() {
                let url = this.$util.domain + "/managerapi/v2/getTestGrade";

                this.$http({
                    url,
                    method: "POST",
                    body: JSON.stringify({
                        physicalTestId: this.physicalTestId
                    })
                }).then(response => {
                    if (response.data.error == 10000) {
                        let testList = response.data.data;
                        if (testList && testList.length > 0) {
                            this.grades = [...testList];
                            this.imData.grade = Math.max(...testList);
                        }
                    }
                });
            },
            handleSuccess(response) {
                if (response.error !== 10000) {
                    if (response.error == -10000) {
                        this.$util.errorMsg("服务器开小差");
                    } else {
                        this.$util.errorMsg(response.message);
                    }
                } else {
                    let params = {
                        importId: response.data.importId,
                        physicalTestId: this.physicalTestId,
                        physicalName: this.physicalName,
                        itemId: this.itemId,
                        testName: this.testName
                    }
                    this.$util.refreshTo("/#/importStuResult", params);
                }
            },
            handleError(response) {
                if (response.status === 403) {
                    this.SIGNOUT();
                    location.href = "/login";
                }
                this.$util.errorMsg("文件上传失败");
            }
        }
    };
</script>

<style>
    #studentTestImport {
        padding-top: 80px;
        height: calc(100% - 100px);
    }

    #studentTestImport .title {
        color: #0398FF;
    }

    #studentTestImport .el-form-item {
        display: inline-block;
    }

    #studentTestImport #sec_1 {
        width: 70%;
        margin-left: 15%;
        /* height: 60px; */
        text-align: center;
        line-height: 60px;
        color: #333333;
        border: solid 1px #b2b2b2;
        margin-top: 25px;
    }

    #studentTestImport .el-upload--text {
        width: auto;
        height: auto;
    }

    #studentTestImport #sec_2 {
        width: 70%;
        margin-left: 15%;
        color: #333333;
        border: solid 1px #b2b2b2;
        margin-top: 40px;
    }

    #studentTestImport #step2 {
        color: #333333;
        margin-top: 10px;
        line-height: 40px;
    }

    #studentTestImport #step2 .mybtn {
        display: block;
        width: 100px;
        margin: 0 auto 10px;
        height: 40px;
    }

    #studentTestImport #step2 .el-button {
        border-radius: 0px;
    }

    #studentTestImport #sec_1 .mylink {
        color: #0398FF;
    }

    #studentTestImport .test-detail {
        margin: 0 30px 15px;
        padding: 15px 25px;
        background-color: #fff;
        font-size: 14px;
    }

    #studentTestImport .test-detail span {
        padding-right: 10px;
    }

    #studentTestImport .physical-name {
        font-size: 16px;
    }

    .sec-params {
        margin-bottom: 20px;
        text-align: center;
    }

    .sec-params span {
        padding: 10px;
    }
</style>